<template>
  <div class="activities">
    <!-- 顶部静态图片 -->
    <div class="static-banner" v-if="carouselData.length > 0">
      <div class="banner-item">
        <img :src="carouselData[0].image" alt="banner" class="banner-img">
        <div class="banner-overlay">
          <div class="container">
            <div class="banner-content">
              <h1 class="banner-title">{{ carouselData[0].title }}</h1>
              <p class="banner-subtitle" v-if="carouselData[0].subtitle">{{ carouselData[0].subtitle }}</p>
              <p class="banner-description" v-if="carouselData[0].description">{{ carouselData[0].description }}</p>
              <el-button 
                v-if="carouselData[0].buttonText" 
                type="primary" 
                size="large"
                @click="handleCarouselAction(carouselData[0].action)"
              >
                {{ carouselData[0].buttonText }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 页面头部（当没有轮播图时显示） -->
    <div class="page-header" v-else>
      <div class="container">
        <h1 class="page-title">活动中心</h1>
        <p class="page-subtitle">展会期间精彩活动，促进交流合作</p>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="activity-nav">
          <a @click="setActiveTab('activity-calendar')" 
             :class="['nav-item', { active: activeTab === 'activity-calendar' }]">活动日历</a>
          <a @click="setActiveTab('industry-forum')" 
             :class="['nav-item', { active: activeTab === 'industry-forum' }]">行业论坛</a>
          <a @click="setActiveTab('tech-exchange')" 
             :class="['nav-item', { active: activeTab === 'tech-exchange' }]">技术交流会</a>
          <a @click="setActiveTab('business-matching')" 
             :class="['nav-item', { active: activeTab === 'business-matching' }]">商务对接</a>
          <a @click="setActiveTab('product-release')" 
             :class="['nav-item', { active: activeTab === 'product-release' }]">产品发布</a>
          <a @click="setActiveTab('activity-overview')" 
             :class="['nav-item', { active: activeTab === 'activity-overview' }]">其他活动</a>
        </nav>
      </div>
    </div>

    <div class="container">
      <!-- 其他活动（原活动概览） -->
      <section id="activity-overview" class="activity-section" v-if="activeTab === 'activity-overview'">
        <h2 class="section-title">其他活动</h2>
        <div class="overview-content">
          <div v-if="overviewData.imageUrl" class="overview-image">
            <img :src="overviewData.imageUrl || defaultImage" alt="其他活动">
          </div>
          <div class="overview-text">
            <h3>{{ overviewData.title || '其他活动' }}</h3>
            <p v-if="overviewData.subtitle">{{ overviewData.subtitle }}</p>
            <div v-if="overviewData.content" v-html="overviewData.content"></div>
            <div v-else class="empty-tips">暂无活动</div>
          </div>
        </div>
      </section>

      <!-- 技术交流会 -->
      <section id="tech-exchange" class="activity-section" v-if="activeTab === 'tech-exchange'">
        <h2 class="section-title">技术交流会</h2>
        <div v-if="techActivities.length" class="activities-grid">
          <div class="activity-item" v-for="activity in techActivities" :key="activity.id">
            <div class="activity-image" v-if="activity.image || true">
              <img :src="activity.image || defaultImage" :alt="activity.title">
            </div>
            <div class="activity-content">
              <h3>{{ activity.title }}</h3>
              <p v-if="activity.description">{{ activity.description }}</p>
              <div v-if="activity.contentHtml" v-html="activity.contentHtml"></div>
              <el-button type="primary" @click="goTechExchange()">查看详情</el-button>
            </div>
          </div>
        </div>
        <div v-else class="empty-tips">暂无活动</div>
      </section>

      <!-- 商务对接会 -->
      <section id="business-matching" class="activity-section" v-if="activeTab === 'business-matching'">
        <h2 class="section-title">商务对接会</h2>
        <div v-if="businessList.length" class="business-grid">
          <div class="business-item" v-for="item in businessList" :key="item.id">
            <div class="business-image" v-if="item.image || true">
              <img :src="item.image || defaultImage" :alt="item.title">
            </div>
            <div class="business-body">
              <h3>{{ item.title }}</h3>
              <p v-if="item.description">{{ item.description }}</p>
              <div v-if="item.contentHtml" v-html="item.contentHtml"></div>
              <div class="business-link" v-if="item.linkUrl">
                <a :href="item.linkUrl" target="_blank">查看详情</a>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-tips">暂无活动</div>
      </section>

      <!-- 产品发布会 -->
      <section id="product-release" class="activity-section" v-if="activeTab === 'product-release'">
        <h2 class="section-title">产品发布会</h2>
        <div v-if="productReleases.length" class="product-releases">
          <div class="release-item" v-for="release in productReleases" :key="release.id">
            <div class="release-header">
              <div class="release-image">
                <img :src="release.image || defaultImage" :alt="release.title">
              </div>
              <div class="release-info">
                <h3>{{ release.title }}</h3>
                <p v-if="release.description">{{ release.description }}</p>
                <div class="release-details">
                  <span v-if="release.time" class="release-time">{{ release.time }}</span>
                  <span v-if="release.location" class="release-location">{{ release.location }}</span>
                </div>
              </div>
            </div>
            <div class="release-content">
              <div v-if="release.contentHtml" class="release-rich" v-html="release.contentHtml"></div>
              <h4 v-if="release.highlights && release.highlights.length">产品亮点</h4>
              <ul v-if="release.highlights && release.highlights.length">
                <li v-for="highlight in release.highlights" :key="highlight">{{ highlight }}</li>
              </ul>
              <div class="release-actions">
                <el-button type="primary" @click="goProductRelease()">查看详情</el-button>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-tips">暂无活动</div>
      </section>

      <!-- 行业论坛 -->
      <section id="industry-forum" class="activity-section" v-if="activeTab === 'industry-forum'">
        <h2 class="section-title">行业论坛</h2>
        <div class="forum-content">
          <div v-if="industryForums.length" class="forum-schedule">
            <div class="schedule-item" v-for="forum in industryForums" :key="forum.id">
              <div class="forum-image">
                <img :src="forum.image || defaultImage" :alt="forum.title">
              </div>
              <div class="schedule-info">
                <h3>{{ forum.title }}</h3>
                <p v-if="forum.description">{{ forum.description }}</p>
                <div v-if="forum.contentHtml" class="forum-rich" v-html="forum.contentHtml"></div>
                <el-button type="primary" size="small" @click="goIndustryForum()">查看详情</el-button>
              </div>
            </div>
          </div>
          <div v-else class="empty-tips">暂无活动</div>
        </div>
      </section>

      <!-- 活动日历 -->
      <section id="activity-calendar" class="activity-section" v-if="activeTab === 'activity-calendar'">
        <h2 class="section-title">活动日历</h2>
        <div class="calendar-content">
          <div v-if="calendarDays.length" class="calendar-grid">
            <div class="calendar-day" v-for="day in calendarDays" :key="day.date">
              <div class="day-header">
                <span class="day-date">{{ day.date }}</span>
                <span class="day-name">{{ day.name }}</span>
              </div>
              <div class="day-events">
                <div class="event-item" v-for="event in day.events" :key="event.id">
                  <span class="event-time">{{ event.time }}</span>
                  <span class="event-title">{{ event.title }}</span>
                  <span class="event-type">{{ event.type }}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="empty-tips">暂无活动</div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { activityApi, subpageApi } from '@/api/user'
import { 
  Connection, 
  Document, 
  Star,
  Search
} from '@element-plus/icons-vue'

export default {
  name: 'Activities',
  setup() {
    const router = useRouter()
    
    // 当前激活的tab
    const activeTab = ref('activity-calendar')
    
    // 轮播图数据
    const carouselData = ref([])
    
    // 设置激活的tab
    const setActiveTab = (tabName) => {
      activeTab.value = tabName
    }
    
    // 处理轮播图按钮点击
    const handleCarouselAction = (action) => {
      if (action) {
        console.log('轮播图按钮点击:', action)
      }
    }
    
    // 加载轮播图数据
    const loadCarouselData = async () => {
      try {
        const response = await subpageApi.getContentByType('carousel_activities')
        if (response && response.code === '200' && response.data) {
          carouselData.value = response.data
            .filter(item => item.status === 'active')
            .map(item => {
              const content = typeof item.content === 'string' ? JSON.parse(item.content) : item.content
              return {
                id: item.id,
                title: item.title,
                subtitle: item.subtitle || '',
                description: content.description || '',
                image: item.imageUrl || content.image || '',
                buttonText: content.buttonText || '',
                action: content.action || ''
              }
            })
            .sort((a, b) => a.sort - b.sort)
        }
      } catch (error) {
        console.error('加载轮播图数据失败:', error)
      }
    }
    
    const overviewData = ref({})
    const defaultImage = 'https://via.placeholder.com/400x250/E9ECFF/320063?text=Activity'
    const techActivities = ref([])
    const businessList = ref([])
    const productReleases = ref([])
    const industryForums = ref([])
    const calendarDays = ref([])

    // 加载活动数据
    const loadActivitiesData = async () => {
      try {
        // 概览
        const overviewRes = await subpageApi.getSubpageList('activities', 'activity-overview')
        if (overviewRes && (overviewRes.code === '200' || overviewRes.code === 200) && Array.isArray(overviewRes.data) && overviewRes.data.length) {
          const first = overviewRes.data[0]
          let parsed = {}
          try { parsed = typeof first.content === 'string' ? JSON.parse(first.content) : (first.content || {}) } catch (_) { parsed = { content: first.content } }
          overviewData.value = {
            title: first.title || '',
            subtitle: first.subtitle || parsed.subtitle || parsed.description || '',
            content: parsed.content || '',
            imageUrl: first.imageUrl || parsed.imageUrl || ''
          }
        } else {
          overviewData.value = {}
        }

        // 技术交流会
        const techRes = await subpageApi.getSubpageList('activities', 'tech-exchange')
        techActivities.value = Array.isArray(techRes?.data) ? techRes.data.map((row, idx) => {
          let parsed = {}
          try { parsed = typeof row.content === 'string' ? JSON.parse(row.content) : (row.content || {}) } catch (_) { parsed = { content: row.content } }
          return {
            id: row.id || idx + 1,
            title: row.title || '',
            description: row.description || parsed.description || parsed.subtitle || '',
            image: row.imageUrl || parsed.imageUrl || '',
            contentHtml: parsed.content || ''
          }
        }) : []

        // 商务对接会
        const businessRes = await subpageApi.getSubpageList('activities', 'business-matching')
        businessList.value = Array.isArray(businessRes?.data) ? businessRes.data.map((row, idx) => {
          let parsed = {}
          try { parsed = typeof row.content === 'string' ? JSON.parse(row.content) : (row.content || {}) } catch (_) { parsed = { content: row.content } }
          return {
            id: row.id || idx + 1,
            title: row.title || '',
            description: row.description || parsed.description || parsed.subtitle || '',
            image: row.imageUrl || parsed.imageUrl || '',
            contentHtml: parsed.content || '',
            linkUrl: row.linkUrl || parsed.linkUrl || ''
          }
        }) : []

        // 产品发布会
        const productRes = await subpageApi.getSubpageList('activities', 'product-release')
        productReleases.value = Array.isArray(productRes?.data) ? productRes.data.map((row, idx) => {
          let parsed = {}
          try { parsed = typeof row.content === 'string' ? JSON.parse(row.content) : (row.content || {}) } catch (_) { parsed = { content: row.content } }
          return {
            id: row.id || idx + 1,
            title: row.title || '',
            description: row.description || parsed.description || parsed.subtitle || '',
            image: row.imageUrl || parsed.imageUrl || '',
            time: row.time || '',
            location: row.location || '',
            highlights: parsed.features ? String(parsed.features).split(/[,，]/).filter(Boolean) : [],
            contentHtml: parsed.content || ''
          }
        }) : []

        // 行业论坛
        const forumRes = await subpageApi.getSubpageList('activities', 'industry-forum')
        industryForums.value = Array.isArray(forumRes?.data) ? forumRes.data.map((row, idx) => {
          let parsed = {}
          try { parsed = typeof row.content === 'string' ? JSON.parse(row.content) : (row.content || {}) } catch (_) { parsed = { content: row.content } }
          return {
            id: row.id || idx + 1,
            title: row.title || '',
            description: row.description || parsed.description || parsed.subtitle || '',
            image: row.imageUrl || parsed.imageUrl || '',
            contentHtml: parsed.content || ''
          }
        }) : []

        // 活动日历（从活动接口取，生成最近3天概要）
        const activitiesResponse = await activityApi.getActivityList({ status: 'published' })
        if (activitiesResponse && (activitiesResponse.code === '200' || activitiesResponse.code === 200) && Array.isArray(activitiesResponse.data)) {
          const activitiesAll = activitiesResponse.data
          const calendar = {}
          activitiesAll.forEach(a => {
            if (a.startTime) {
              const date = a.startTime.split(' ')[0]
              const time = a.startTime.split(' ')[1] || '09:00'
              if (!calendar[date]) {
                calendar[date] = { date: formatDate(date), name: getWeekDay(date), events: [] }
              }
              calendar[date].events.push({ id: a.id, time, title: a.title || a.name || '', type: '' })
            }
          })
          calendarDays.value = Object.values(calendar).slice(0, 3)
        } else {
          calendarDays.value = []
        }
      } catch (error) {
        console.error('活动数据加载失败:', error)
        overviewData.value = {}
        techActivities.value = []
        businessList.value = []
        productReleases.value = []
        industryForums.value = []
        calendarDays.value = []
      }
    }
    
    // 辅助函数
    const formatDate = (dateStr) => {
      const date = new Date(dateStr)
      return `${date.getMonth() + 1}月${date.getDate()}日`
    }
    
    const getWeekDay = (dateStr) => {
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const date = new Date(dateStr)
      return days[date.getDay()]
    }
    
    const getActivityTypeName = (type) => {
      const typeMap = {
        'tech': '技术交流',
        'conference': '会议',
        'product': '产品发布',
        'launch': '产品发布',
        'forum': '论坛',
        'seminar': '研讨会'
      }
      return typeMap[type] || '活动'
    }

    // 报名参加活动
    const goTechExchange = () => {
      router.push('/tech-exchange')
    }
    
    // 组件挂载时加载数据
    onMounted(() => {
      loadActivitiesData()
      loadCarouselData()
    })



    // 参加发布会
    const goProductRelease = () => {
      router.push('/product-release')
    }

    // 下载资料
    const downloadMaterials = (release) => {
      console.log('下载资料:', release)
      ElMessage.success('资料下载链接已发送到您的邮箱')
    }

    // 参与论坛
    const goIndustryForum = () => {
      router.push('/industry-forum')
    }

    return {
      activeTab,
      setActiveTab,
      carouselData,
      handleCarouselAction,
      overviewData,
      defaultImage,
      techActivities,
      businessList,
      productReleases,
      industryForums,
      calendarDays,
      goTechExchange,
      goProductRelease,
      downloadMaterials,
      goIndustryForum
    }
  }
}
</script>

<style scoped>
.activities {
  padding-top: 70px;
  min-height: 100vh;
  background: #f8f9fa;
}

/* 顶部静态图片样式 */
.static-banner { margin-top: 0; }
.banner-item { position: relative; height: 400px; overflow: hidden; }
.banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); padding-top: 130px; }
.banner-content { text-align: left; color: #fff; max-width: 100%; }
.banner-title { font-size: 48px; font-weight: bold; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.banner-subtitle { font-size: 24px; margin-bottom: 15px; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.banner-description { font-size: 18px; margin-bottom: 30px; opacity: 0.8; line-height: 1.6; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

.page-header {
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.page-title {
  font-size: 48px;
  margin-bottom: 20px;
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
}

.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.activity-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
}

.nav-item:hover {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.nav-item.active {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.activity-section {
  background: white;
  margin: 30px 0;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* 活动概览样式 */
.overview-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.overview-image {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.overview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 富文本内图片限制（活动中心各区块） */
.overview-text :deep(img),
.activity-content :deep(img),
.business-body :deep(img),
.release-content :deep(img),
.schedule-info :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.overview-text h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #2c3e50;
}

.overview-text p {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.6;
}

/* 技术交流活动样式 */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.activity-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.activity-item:hover {
  transform: translateY(-5px);
}

.activity-image {
  height: 180px;
  overflow: hidden;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-content {
  padding: 25px;
}

.activity-content h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #2c3e50;
}

.activity-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.activity-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #999;
}

.activity-speakers h4 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.speakers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.speaker-tag {
  background: #e1f5fe;
  color: #0277bd;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
}

/* 商务对接样式 */
.business-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.business-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  border: 1px solid #eef2ff;
}

.business-image {
  height: 160px;
  overflow: hidden;
}

.business-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-body {
  padding: 16px 18px;
}

.business-info h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #2c3e50;
}

.business-info p {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}

.business-features {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: #2c3e50;
}

.match-form {
  background: #f8f9fa;
  padding: 40px;
  border-radius: 12px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #409eff;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.submit-btn:hover {
  background: #337ecc;
}

/* 产品发布会样式 */
.product-releases {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.release-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.release-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
}

.release-info h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #2c3e50;
}

.release-info p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.release-details {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
  color: #999;
}

.release-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

.release-content {
  padding: 30px;
}

.release-content h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #2c3e50;
}

.release-content ul {
  margin-bottom: 25px;
  padding-left: 20px;
}

.release-content li {
  color: #666;
  margin-bottom: 8px;
  line-height: 1.5;
}

.release-actions {
  display: flex;
  gap: 15px;
}

/* 行业论坛样式 */
.forum-schedule {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.schedule-item {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.forum-image {
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}

.forum-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-time {
  text-align: center;
  min-width: 120px;
}

.schedule-time .time {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.schedule-time .date {
  font-size: 0.9rem;
  color: #666;
}

.schedule-info h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #2c3e50;
}

.schedule-info p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.forum-topics,
.forum-participants {
  margin-bottom: 20px;
}

.forum-topics h4,
.forum-participants h4 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.topics-list,
.participants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-tag {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
}

.participant-tag {
  background: #fff3e0;
  color: #ef6c00;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
}

/* 活动日历样式 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.calendar-day {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.day-header {
  background: #409eff;
  color: white;
  padding: 20px;
  text-align: center;
}

.day-date {
  display: block;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.day-name {
  font-size: 0.9rem;
  opacity: 0.9;
}

.day-events {
  padding: 20px;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  margin-bottom: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: background 0.3s;
}

.event-item:hover {
  background: #e3f2fd;
}

.event-time {
  font-weight: bold;
  color: #409eff;
  min-width: 60px;
}

.event-title {
  flex: 1;
  color: #2c3e50;
}

.event-type {
  background: #e1f5fe;
  color: #0277bd;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .activity-section {
    padding: 20px;
  }
  
  .overview-content,
  .business-content {
    grid-template-columns: 1fr;
  }
  
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .activities-grid {
    grid-template-columns: 1fr;
  }
  
  .release-header {
    grid-template-columns: 1fr;
  }
  
  .schedule-item {
    flex-direction: column;
  }
  
  .calendar-grid {
    grid-template-columns: 1fr;
  }
}
</style> 